<template>
  <div style="padding: 24px 36px 0 36px">
    <dataCard
      width="1848"
      height="404"
      title="训练员授课管理情况"
      v-loading="card1_loading"
    >
      <div class="card1 flex">
        <!-- 卡片 -->
        <div class="cards flex">
          <div class="item" style="margin: 32px 0 0 15px">
            <img
              class="icon"
              src="@/assets/images/screen/spotCheck/icon1_1.png"
              alt=""
            />
            <div class="value">{{ card1_overview.spotCheckNum || 0 }}</div>
            <div class="label">抽查数量</div>
          </div>
          <div class="item" style="margin: 32px 0 0 48px">
            <img
              class="icon"
              src="@/assets/images/screen/spotCheck/icon1_2.png"
              alt=""
            />
            <div class="value">{{ card1_overview.spotCheckTimes || 0 }}</div>
            <div class="label">累计抽查人数</div>
          </div>
        </div>
        <!--  近12月抽查新增数据-->
        <div class="data">
          <div class="ranktitle flexbet">
            <div class="txt flexcolcenter">
              <img src="@/assets/images/screen/lineIcon.png" alt="" />
              近12月抽查新增数据
            </div>
          </div>
          <div ref="chart" style="width: 918px; height: 268px"></div>
        </div>
      </div>
    </dataCard>

    <dataCard width="1848" height="525" style="margin-top: 24px">
      <div class="card2">
        <div class="navs flex rela">
          <div
            :class="['nav', 'shou', activeName == item.active ? 'active' : '']"
            v-for="(item, index) in nav"
            :key="index"
            @click="tabcChange(item)"
          >
            {{ item.name }}
          </div>
          <div
            class="bottomline abso"
            :style="{ left: nav[activeName].left + 'px' }"
          ></div>
        </div>
        <div style="padding: 16px 40px">
          <spotCheck_detail
            v-show="activeName == 0"
            :active="activeName"
          ></spotCheck_detail>
          <spotCheck_userDetail
            v-show="activeName == 1"
            :active="activeName"
          ></spotCheck_userDetail>
        </div>
      </div>
    </dataCard>
  </div>
</template>
  
<script>
import * as echarts from "echarts";
import dataCard from "./components/dataCard";
import spotCheck_detail from "./components/spotCheck_detail";
import spotCheck_userDetail from "./components/spotCheck_userDetail";
import { overview, newAddSpotCheckStatistics } from "@/api/screen/spotCheck";
export default {
  components: {
    dataCard,
    spotCheck_detail,
    spotCheck_userDetail,
  },
  data() {
    return {
      nav: [
        {
          name: "抽查明细",
          active: 0,
          left: 20,
        },
        {
          name: "抽查未通过员工明细",
          active: 1,
          left: 183,
        },
      ],
      activeName: 0,
      card1_overview: {},
      card1_newAddSpotCheckStatistics: [],
      card1_loading: false,
    };
  },
  mounted() {
    this.getCard1_data();
  },
  methods: {
    tabcChange(item) {
      this.activeName = item.active;
    },
    async getCard1_data() {
      this.card1_loading = true;

      try {
        const [api1Data, api2Data] = await Promise.all([
          overview(),
          newAddSpotCheckStatistics({
            pageNum: 1,
            pageSize: 10,
          }),
        ]);
        this.card1_overview = api1Data.data;
        this.card1_newAddSpotCheckStatistics = api2Data.data;
        this.initCard1_Chart(this.card1_newAddSpotCheckStatistics);
      } finally {
        this.card1_loading = false;
      }
    },
    initCard1_Chart(list) {
      const nys = list.map((item) => {
        return item.ny;
      });
      const spotCheckNums = list.map((item) => {
        return item.spotCheckNum;
      });
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          top: "15px",
          // 图例的文字样式
          textStyle: {
            color: "#333",
          },
          data: ["新增抽查数量"],
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        grid: {
          left: "0",
          right: "50px",
          bottom: "0",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            data: nys,
            // axisLabel: {
            //   rotate: 45, // 旋转角度
            //   interval: 0, // 强制显示所有标签
            //   margin: 20, // 标签与轴线的距离
            //   // align: "center", // 标签对齐方式
            //   // offset: [100, 0], // 微调标签位置，第一个值是水平方向，第二个值是垂直方向
            //   textStyle: {
            //     fontSize: 12, // 标签字体大小
            //   },
            //   axisTick: {
            //     alignWithLabel: true, // 使刻度线与标签对齐
            //   },
            // },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "新增抽查数量",
            type: "line",
            stack: "Total",
            lineStyle: {
              color: "#ff8200", // 设置线条颜色
            },
            itemStyle: {
              color: "#ff8200", // 设置图例颜色
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,

                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255, 144, 0, 1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 144, 0, 0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            emphasis: {
              focus: "series",
            },
            data: spotCheckNums,
            smooth: true,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.card2 {
  .navs {
    border-bottom: 1px solid #eeeeee;
    padding: 30px 0 24px 30px;
    .nav:nth-of-type(1) {
      margin-left: 0px;
    }
    .nav {
      margin-left: 58px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #666666;
      line-height: 18px;
      font-style: normal;
    }
    .active {
      font-weight: 600;
      line-height: 16px;
      font-size: 18px;
      color: #ff6801;
    }
    .bottomline {
      transition: all 0.5s ease-in-out;
      bottom: -1px;
      width: 90px;
      height: 2px;
      background: #ff6801;
      border-radius: 1px;
    }
  }
}
.ranktitle {
  .txt {
    img {
      margin-right: 3px;
      width: 8px;
      height: 11px;
    }
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    text-align: left;
    font-style: normal;
  }
  .more {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #666666;
    line-height: 22px;
    font-style: normal;
  }
}
.progressBox {
  padding-left: 20px;
  .item:nth-of-type(1) .no {
    color: #ff5806 !important;
  }
  .item:nth-of-type(2) .no {
    color: #ffa63b !important;
  }
  .item:nth-of-type(3) .no {
    color: #ffd03b !important;
  }
  .item {
    margin-top: 17px;

    .line {
      .no_name {
        .no {
          margin: 0 15px 0 9px;
          color: #999999;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;

          line-height: 22px;
          font-style: normal;
        }
        .name {
          width: 56px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          line-height: 20px;
          font-style: normal;
        }
      }
      .store {
        max-width: 250px;

        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 20px;

        font-style: normal;
      }
      .time {
        width: 115px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #9a8157;
        line-height: 19px;
        font-style: normal;
      }
    }

    .progress {
      margin-top: 5px;
      width: 532px;
      height: 4px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 2px;
      .progress-bar {
        height: 4px;
        border-radius: 2px;
        background: linear-gradient(270deg, #ff6801 0%, #ffe9ce 100%);
      }
    }
  }
}
.card1 {
  .data {
    margin: 16px 0 0 76px;
  }
  .cards {
    .item {
      width: 360px;
      height: 256px;
      background: #ffffff;
      box-shadow: 0px 11px 24px -11px rgba(0, 0, 0, 0.23);
      border-radius: 8px;
      border: 2px solid #ffffff;
      .icon {
        margin: 40px 144px 0 144px;
        width: 72px;
        height: 72px;
      }
      .value {
        margin-top: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 40px;
        color: #ff6801;
        line-height: 56px;
        text-align: center;
        font-style: normal;
      }
      .label {
        margin-top: 10px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: center;
        font-style: normal;
      }
    }
  }
}
</style>